<template>
    <div>
        <el-container>
            <!-- 头部 -->
            <el-header>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <!-- logo商标 -->
                    <el-menu-item index="0" class="login" style="pointer-events: none">
                        <div class="demo-basic--circle">
                            <div class="block">
                                <el-avatar shape="square" :size="60" :src="squareUrl"></el-avatar>
                                <span class="logo-text">My Store</span>
                            </div>
                        </div>
                    </el-menu-item>
                    <!-- 菜单栏 -->
                    <el-menu-item index="1" @click="navigateTo('/front_index')">
                        <i class="el-icon-house"></i> 首页
                    </el-menu-item>
                    <el-menu-item index="2" @click="navigateTo('/front_goodsAll')">
                        <i class="el-icon-shopping-bag-2"></i>
                        <el-badge value="new" class="item">全部商品</el-badge>
                    </el-menu-item>
                    <el-menu-item index="3" @click="navigateTo('/orderManagement')">
                        <i class="el-icon-files"></i> 订单管理
                    </el-menu-item>
                    <el-menu-item index="4" @click="navigateTo('/front_carts')">
                        <i class="el-icon-shopping-cart-2"></i> 购物车
                    </el-menu-item>

                    <el-menu-item index="6" class="search-item">
                        <el-input
                            placeholder="搜索商品"
                            v-model="input"
                            clearable
                            prefix-icon="el-icon-search"
                            autofocus="true"
                        ></el-input>
                    </el-menu-item>

                    <!-- 登录/注册按钮（未登录时显示） -->
                    <template v-if="!isLoggedIn">
                        <el-menu-item index="7" class="login" @click="navigateTo('/login')">
                            <i class="el-icon-key"></i> 登录
                        </el-menu-item>
                        <el-menu-item index="8" class="login" @click="navigateTo('/enroll')">
                            <i class="el-icon-user-plus"></i> 注册
                        </el-menu-item>
                    </template>

                    <!-- 用户信息（登录后显示） -->
                    <el-submenu index="9" class="login user-info" v-else>
                        <template slot="title">
                            <el-avatar :size="30" :src="userAvatar"></el-avatar>
                            <span style="margin-left: 10px;">{{ userName }}</span>
                        </template>
                        <el-menu-item @click="navigateTo('/front_userInfo')">
                            <i class="el-icon-user"></i> 个人中心
                        </el-menu-item>
                        <el-menu-item @click="logout">
                            <i class="el-icon-switch-button"></i> 退出登录
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </div>
</template>

<script>
export default {
    name: "front1",
    data() {
        return {
            activeIndex: "/front_index",
            squareUrl: "https://picsum.photos/50", // 使用 Picsum logo图片
            input: "", // 查询框
            isLoggedIn: false, // 登录状态
            userName: "", // 用户名
            userAvatar: "" // 用户头像
        };
    },
    created() {
        this.checkLoginStatus();
    },
    methods: {
        // 检查登录状态
        checkLoginStatus() {
            let user = JSON.parse(sessionStorage.getItem("user"))
            if (user) {
                this.isLoggedIn = true;
                this.userName = user.username ;
                this.userAvatar = user.avatar ;
            }
        },

        // 导航方法
        navigateTo(route) {
            // 如在本导航，则捕获重复导航无视
            this.$router.push(route).catch((err) => {
                // 捕获 NavigationDuplicated 错误并忽略
                if (err.name !== "NavigationDuplicated") {
                    throw err; // 如果不是重复导航错误，重新抛出
                }
            });
        },

        // 退出登录
        logout() {
            // 清除登录状态
            window.sessionStorage.removeItem('user')
            this.isLoggedIn = false;
            this.userName = "";
            this.userAvatar = "";

            // 跳转到首页
            this.navigateTo('/front_index');

            // 提示退出成功
            this.$message.success('退出登录成功');
        },

        handleSelect(key, keyPath) {
            this.activeIndex = key;
            console.log(key, keyPath);
        },

        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
    },
};
</script>

<style scoped>
.buttonInfo {

}
.login {
    float: right;
    background-color: inherit !important; /* 悬浮时背景色不变 */
    color: inherit !important; /* 悬浮时文字颜色不变 */
    cursor: default !important; /* 悬浮时鼠标样式为默认 */
}

.user-info {
    float: right;
    margin-right: 20px;
}

.logo-text {
    margin-left: 10px;
    font-size: 18px;
    font-weight: bold;
}

.el-menu-demo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
}

.el-menu-demo .el-menu-item {
    font-size: 16px;
}

/* 点击悬停时 */
.el-menu-demo .el-menu-item:hover {
    background-color: #e0f0ff;
}

.search-item {
    flex-grow: 1;
    max-width: 350px;
    margin: 0 30px;
    background-color: inherit !important; /* 悬浮时背景色不变 */
}

/* 去掉 el-input 聚焦时的背景色 */
.search-item .el-input__inner:focus {
    background-color: transparent !important;
    border-color: #409eff; /* 保留聚焦时的边框颜色 */
}

.el-aside {
    background-color: #f4f9ff;
    color: #333;
    text-align: left;
    line-height: normal;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    padding-top: 20px;
}

.el-main {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    line-height: normal;
    padding: 30px;
}

body > .el-container {
    margin-bottom: 40px;
}

.el-menu-vertical-demo {
    border-right: none;
}
</style>